<!DOCTYPE html>
<style>
    .multicol { float:left; position:relative; columns:2; column-fill:auto; width:3em; height:40px; line-height:20px; }
</style>
<div class="multicol">
    <div id="line" style="margin-top:-10px;"><br></div>
</div>
<div class="multicol">
    <div id="lineAndBorder" style="margin-top:-10px; border-top:5px solid;"><br></div>
</div>
<div class="multicol">
    <div id="lineAtBoundaryAndBorder" style="margin-top:-10px; border-top:10px solid;"><br></div>
</div>
<div class="multicol">
    <div style="position:relative;">
        <div id="absPos" style="position:absolute; top:-10px;">
            <div id="lineInAbsPos"><br></div>
        </div>
    </div>
</div>
<div class="multicol">
    <div style="margin-top:-15px; border-top:5px solid;">
        <div id="lineInNestedBlock" style="border-top:15px solid;"><br></div>
    </div>
</div>
<div class="multicol">
    <div style="margin-top:-10px;" id="lineAfterFloat">
        <div style="float:left; width:100%; height:20px;"></div>
        &nbsp;<br>
    </div>
</div>
<div class="multicol">
    <div id="unsplittableBlock" style="margin-top:-10px; height:20px; break-inside:avoid;"></div>
</div>
<div class="multicol">
    <div id="unsplittableFloat" style="float:left; margin-top:-10px; height:20px; break-inside:avoid;"></div>
</div>
<div class="multicol">
    <div id="unsplittableAbspos" style="position:absolute; top:-10px; height:20px; break-inside:avoid;"></div>
</div>
<div class="multicol">
    <img id="image" style="display:block; margin-top:-10px; height:20px;">
</div>
<div style="clear:both;"></div>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
    function pos(elm) { return document.getElementById(elm).offsetTop; }
    generate_tests(assert_equals, [
         [ "line", pos("line"), -10 ],
         [ "lineAndBorder", pos("lineAndBorder"), -10 ],
         [ "lineAtBoundaryAndBorder", pos("lineAtBoundaryAndBorder"), -10 ],
         [ "lineInAbspos", pos("lineInAbsPos"), 0 ],
         [ "abspos", pos("absPos"), -10 ],
         [ "lineInNestedBlock", pos("lineInNestedBlock"), -10 ],
         [ "lineAfterFloat", pos("lineAfterFloat"), -10 ],
         [ "unsplittableBlock", pos("unsplittableBlock"), -10 ],
         [ "unsplittableFloat", pos("unsplittableFloat"), -10 ],
         [ "unsplittableAbspos", pos("unsplittableAbspos"), -10 ],
         [ "image", pos("image"), -10 ],
    ]);
</script>
